<template>
	<view>
		<!-- 视频内容部分 -->
			<view 
				class="videoScroll" 
			>
				<view class="videoItem" v-for="(item, index) in list" :key="item.id">
					
					<view class="user" @click="tuVideoItem(item.id)">
						<view class="user-header-img">
							<image :src="item.user_img"></image>
						</view>
						<view class="video-info">
							<view class="user-info">
								<view class="user-name">{{item.user_name}}</view>
								<view class="dian">·</view>
								<view class="isguanzhu">关注</view>
								<view class="time">{{item.time|getTime}}</view>
								
							</view>
							<view class="video-title">{{item.title}}</view>
						</view>
						
					</view>
					
					<view class="video">
						<!-- :poster="item.cover_url" -->
						<video
							:autoplay="true"
							:src="item.video_url"  
							class="comm"
							object-fit="cover"
							:show-center-play-btn="true"
							play-btn-position="bottom"
							:enable-play-gesture="true"
							:show-mute-btn="true"
							:muted="false"
							@play="handlePlay"
							:id="item.id"
							v-if="videoId == item.id"
						></video>
							
						<!-- 性能优化，使用image代替video -->
						<view v-else class="imgcomm" @click="handlePlay" :id="item.id">
							<image
								class="cover-img"
								:src="item.cover_img"
							></image>
							
							<image class="isplay" src="../../static/icon/isplay.png" mode=""></image>
						</view>
					</view>
					
					<view class="video-footer">
						<view class="vf">
							<view class="iconfont icon-shoucang"></view>
							<view class="num">{{item.shoucang}}</view>
						</view>
						<view class="vf" @click="tuVideoItemPl(item.id)">
							<view class="iconfont icon-pinglun2"></view>
							<view class="num plnum">{{item.pinglun}}</view>
						</view>
						<view class="vf">
							<view class="iconfont icon-zhuanfa1"></view>
							<view class="num">{{item.zhuanfa}}</view>
						</view>
					</view>

				</view>
			</view>
		
		
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		name:"video-com",
		data() {
			return {
				videoHeight: "",
				videoId: ""
			};
		},
		filters: {
			getTime(time) {
				return moment(time * 1000).format('YYYY-M-DD');
			}
		},
		props: {
			list: {
				type:Array,
				default() {
					return [];
				}
			}
		},
		methods: {
			handlePlay(e) {
				
				let vid = e.currentTarget.id;
				
				// this.vid !== vid && this.videoContext && this.videoContext.pause();
				// this.vid = vid;
				
				this.videoId = vid;
				
				// console.log(this.videoId);
				
				this.videoContext = wx.createVideoContext(vid, this);
				
				// this.videoContext.play()
			},
			
			tuVideoItem(id) {
				uni.navigateTo({
					url: '/pages/video-item/video-item?id='+id+'&c='+0
				})
			},
			
			tuVideoItemPl(id) {
				uni.navigateTo({
					url: '/pages/video-item/video-item?id='+id+'&c='+1
				})
			}
		},
		mounted() {

			
			let videoHeight = getApp().globalData.statusNav + 63;
			
			// console.log(videoHeight);
			this.videoHeight = "calc(100vh - " + videoHeight + "px)";

		}
	}
</script>

<style scoped lang="scss">

/* 视频内容部分 */
.videoScroll {
	width: 100%;
	/* calc: 可以动态计算css的宽高 */
	/* 视口单位 vh vw 1vh = 1%的高度 */
	// height: calc(100vh - 204rpx);
}

.video video {
	vertical-align: middle;
}

.videoItem {
	padding: 0 3%;
	.user {
		width: 100%;
		display: flex;
		.user-header-img {
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}
		}
		
		.video-info {
			width: 100%;
			margin-left: 20rpx;
			
			.user-info {
				display: flex;
				height: 40rpx;
				line-height: 40rpx;
				
				.user-name {
					font-size: 24rpx;
					color: #333;
				}
				
				.dian {
					color: #999;
					margin: 0 8rpx;
					font-size: 40rpx;
				}
				
				.isguanzhu {
					font-size: 26rpx;
					color: #ff6d9f;
				}
				
				.time {
					font-size: 24rpx;
					color: #999;
					margin-left: auto;
				}
			}
			
			.video-title {
				width: 100%;
				font-size: 28rpx;
				/* 多行文本溢出隐藏 */
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				/*设置对齐模式*/
				-webkit-line-clamp: 2;
				/*设置多行的行数*/
				margin: 2rpx 0 20rpx;
			}
		}
	}
	
	.video-footer {
		background-color: #edebee;
		border-radius: 0 0 12rpx 12rpx;
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 80rpx;
		margin-bottom: 50rpx;
		
		.vf {
			display: flex;
			line-height: 80rpx;
			color: #6d6b6e;
			.iconfont {
				font-size: 38rpx;
			}
			
			.num {
				font-size: 24rpx;
				margin-left: 8rpx;
			}
			
			.plnum {
				line-height: 77rpx;
			}
		}
	}
}


.videoScroll .comm {
	width: 100%;
	height: 360rpx;
	border-radius: 12rpx 12rpx 0 0;
}

.videoScroll .imgcomm {
	position: relative;
	width: 100%;
	height: 360rpx;
	border-radius: 12rpx;
	.cover-img {
		width: 100%;
		height: 100%;
		border-radius: 12rpx 12rpx 0 0;
		vertical-align: middle;
	}
	.isplay {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		opacity: .8;
	}
}




</style>
